/* ==== Các style này chỉ áp dụng khi body có class confproduct-page ==== */


        body.confproduct-page .panel-accordion {
          background: #fff;
          border-radius: 6px;
          border: 0.5px solid #f0f0f0;
          box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.08);
          overflow: hidden;
          margin: 16px 0;
          outline: none !important;
          transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }
        body.confproduct-page .panel-accordion:hover,
        body.confproduct-page .panel-accordion:focus,
        body.confproduct-page .panel-accordion.focus-within,
        body.confproduct-page .panel-accordion.is-open {
          border-color: #f0f0f0 !important;
          box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.08) !important;
          outline: none !important;
        }


        /* header */
        body.confproduct-page .panel-accordion .panel-heading {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 14px 16px 14px 20px;
          cursor: pointer;
          outline: none !important;
        }
        body.confproduct-page .panel-accordion *:focus {
          outline: none !important;
        }


        /* tiêu đề panel */
        body.confproduct-page .panel-accordion .panel-title {
          margin: 0;
          font-size: 17px;
          color: #3d4044;
          font-weight: normal;
        }
        @media (max-width: 575px) {
          body.confproduct-page .panel-accordion .panel-heading .panel-title {
            font-size: 16px;
          }
        }

        /* icon + / – */
        body.confproduct-page .panel-accordion .panel-heading i.lm {
          font-size: 20px;
          color: #888;
          transition: color 0.25s ease;
          transform: none !important;
        }
        /* Nếu không dùng font icon cho +/-, mà dùng text:
        body.confproduct-page .panel-accordion .panel-heading i.lm-plus::before { content: '+'; }
        body.confproduct-page .panel-accordion .panel-heading i.lm-minus::before { content: '–'; }
        */


        /* body với animation slide */
        body.confproduct-page .panel-accordion .panel-body {
          max-height: 0;
          overflow: hidden;
          padding: 0 16px 0 20px;
          font-size: 14px;
          color: #424242;
          background-color: #fff;
          transition: max-height 0.35s ease, padding 0.35s ease;
        }
        body.confproduct-page .panel-accordion.is-open .panel-body {
          max-height: 2500px;
          padding: 16px 16px 16px 20px;
        }


        /* khi mở: đổi màu tiêu đề & icon */
        body.confproduct-page .panel-accordion.is-open .panel-title {
          color: #0c64fc;
        }
        body.confproduct-page .panel-accordion.is-open .panel-heading i.lm {
          color: #0c64fc;
        }


        /* ====================== TIÊU ĐỀ CHUNG VÀ PHỤ ======================= */
        body.confproduct-page .main-section-title,
        body.confproduct-page .section-subtitle,
        body.confproduct-page .password-enable-checkbox-label {
          font-size: 17px;
          color: #3d4044;
          font-weight: normal;
          margin-bottom: 15px;
        }
        @media (max-width: 575px){
          body.confproduct-page .main-section-title{
            font-size: 16px;
          }
        }


        body.confproduct-page .main-section-title {
          padding-top: 5px;
          padding-bottom: 5px;
          margin-bottom: 20px;
        }


        body.confproduct-page .section-subtitle {
          margin-top: 25px;
        }
        
        body.confproduct-page .password-enable-checkbox-label {
          display: flex;
          align-items: center;
          cursor: pointer;
          margin-top: 25px;
        }
        body.confproduct-page .password-enable-checkbox-label input[type="checkbox"]#enable-password {
          margin-right: 10px;
          width: 17px;
          height: 17px;
          vertical-align: middle;
        }


        /* ====================== content - phần mềm ======================= */
        body.confproduct-page .software-group {
          margin-bottom: 16px;
        }
        body.confproduct-page .software-group .group-title {
          font-size: 14px;
          color: #333;
          margin-bottom: 8px;
          font-weight: normal;
        }
        body.confproduct-page .software-list {
          display: flex;
          flex-wrap: wrap;
        }
        body.confproduct-page .software-item {
          position: relative;
          width: 80px;
          margin: 8px 23px;
          text-align: center;
          font-size: 12px;
          color: #999;
        }
        body.confproduct-page .software-item input[type="checkbox"] {
          position: absolute;
          left: 0px;
          top: 0px;
        }
        body.confproduct-page .software-item .software-icon {
          width: 40px;
          height: 40px;
          opacity: 0.5;
          transition: opacity 0.25s ease;
        }
        body.confproduct-page .software-item input[type="checkbox"]:checked ~ .software-icon {
          opacity: 1;
        }
        body.confproduct-page .software-item .software-label {
          display: block;
          margin-top: 4px;
          font-weight: normal;
        }
        body.confproduct-page .software-item.python .python-version {
          display: none;
          height: 35px;
          width: 60px; 
          margin-top: 4px;
          margin-left: 10px;
          font-size: 12px;
          text-align: center;
          padding: 2px 8px;
          border: 1px solid #ccc;
          border-radius: 3px;
          box-sizing: border-box;
        }
        body.confproduct-page .software-item.python input[type="checkbox"]:checked ~ .python-version {
          display: block;
        }


        /* ====================== Phần tải Google Drive ======================= */
        body.confproduct-page .drive-upload-section {
          margin-top: 25px;
          margin-bottom: 25px;
        }
        body.confproduct-page .form-control {
          width: 100%;
          padding: 10px 12px;
          border: 1px solid #ccc;
          border-radius: 4px;
          box-sizing: border-box;
          margin-bottom: 8px;
          font-size: 14px;
        }
        body.confproduct-page .form-control:focus {
            border-color: #0c64fc;
            box-shadow: 0 0 0 0.2rem rgba(12, 100, 252, 0.25);
            outline: none;
        }
        body.confproduct-page .drive-link-note {
          font-size: 15px;
          color: #666;
        }


        /* ====================== Phần đặt mật khẩu ======================= */
        body.confproduct-page .password-section {
          margin-top: 25px;
          margin-bottom: 10px;
        }


        body.confproduct-page .password-group {
          margin-top: 10px;
        }
        body.confproduct-page .password-input-container {
          position: relative;
          display: flex;
          align-items: center;
        }
        body.confproduct-page .install-password {
          flex-grow: 1;
          padding-right: 45px !important; /* Đảm bảo không gian cho icon */
        }
        body.confproduct-page .install-password:disabled {
          background-color: #e9ecef;
          cursor: not-allowed;
          opacity: 0.7;
        }
        /* CSS cho icon mắt SVG */
        body.confproduct-page .password-toggle-icon {
          position: absolute;
          right: 10px; /* Vị trí từ cạnh phải của container */
          top: 50%;
          transform: translateY(-60%);
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          color: #888; /* Màu của SVG (stroke="currentColor") */
          transition: color 0.2s ease;
          padding: 5px; /* Tăng vùng có thể click */
          /* Loại bỏ border-left và background-color */
        }
        body.confproduct-page .password-toggle-icon svg {
            width: 23px; /* Kích thước hiển thị của SVG */
            height: 23px;
            display: block;
        }
        body.confproduct-page .password-toggle-icon:hover {
          color: #0c64fc;
        }


        body.confproduct-page .password-error {
          color: red !important;
          font-size: 15px;
          margin-top: 8px;
        }